<template>
  <div>
    <search-bar
      :title="title"
      @changeTitle="changeTitle"
      @search="getPostlist"
    />
    <div class="content">
      <div class="left">
        <div class="nav">
          <div class="typebox">
            <div
              class="type"
              :class="item.status ? 'active' : ''"
              v-for="item in label"
              :key="item.id"
              @click="clickLabel(item.id)"
            >
              {{ item.labelName }}
            </div>
            <div style="clear: both"></div>
          </div>
        </div>

        <div class="article">
          <div class="noarticle" v-show="postsList.length == 0">
            <img src="@/assets/img/dev_nocomments@2x.png" alt="" />
            <div class="nocomment-text">
              <div class="nocomment-text-left">暂无文章</div>
              <div class="nocomment-text-right" @click="goadd()">我要发帖</div>
            </div>
          </div>
          <div class="article-list">
            <div class="item" v-for="item in postsList" :key="item.id">
              <div class="title">
                <div class="Topping" v-if="item.topping">
                  <!-- <div> -->
                  <i class="iconfont icon-dev_top"></i>
                  <!-- <span>置顶</span>
                  </div> -->
                </div>
                <div class="name">
                  <router-link
                    :to="'/article/' + item.id"
                    v-text="item.title"
                  />
                </div>
                <div class="tag">{{ item.labelName }}</div>
              </div>
              <div class="item-content">
                <router-link
                  class="item-content-img"
                  :to="'/article/' + item.id"
                  v-if="item.image"
                >
                  <img :src="item.image" alt="" />
                </router-link>
                <router-link
                  class="item-content-article"
                  :to="'/article/' + item.id"
                  v-html="formatter(item.text)"
                ></router-link>
                <div style="clear: both"></div>
              </div>
              <div class="item-bottom">
                <div class="avatar">
                  <img :src="item.logo" alt="" />
                  <span class="username">{{ item.accountName }}</span>
                </div>
                <!-- <div class="like active" @click="like(item.id)"> -->
                <div
                  class="like"
                  :class="item.thumbsUpStatus ? 'active' : ''"
                  @click="like(item)"
                >
                  <i
                    class="iconfont"
                    :class="item.thumbsUpStatus ? 'icon-dev_like' : 'icon-zan'"
                  ></i>
                  <span>赞 {{ item.thumbsUpCount }}</span>
                </div>
                <router-link :to="'/article/' + item.id" class="comment">
                  <i class="iconfont icon-huifu"></i>
                  <span>评论 {{ item.evaluateCount }}</span>
                </router-link>
                <div class="time">
                  <i class="iconfont icon-shijian"></i>
                  <span>{{ getLocalTime(item.gmtCreate) }}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="article-page">
            <el-pagination
              background
              layout="prev, pager, next"
              :page-size="pageSize"
              :total="total"
              class="center"
              @current-change="current"
            >
            </el-pagination>
          </div>
        </div>
      </div>
      <div class="r">
        <div class="right">
          <div class="userinfo">
            <div class="nologin" v-if="!id">
              <div class="avatar" @click="gologin()">
                <i class="iconfont icon-touxiang"></i>
              </div>
              <div class="login" @click="gologin()">前往登录</div>
              <p>参与发帖互动，发现更多精彩内容</p>
            </div>
            <div class="loginstate" v-else>
              <router-link to="/person" class="avatar">
                <img :src="avatar" alt="" />
              </router-link>
              <div class="uername">{{ name }}</div>
              <div class="mine">
                <router-link to="/person/article">
                  <div class="num">{{ myPostCount }}</div>
                  <div class="text">我的贴子</div>
                </router-link>
                <router-link to="/person/reply">
                  <div class="num">{{ myEvaluateCount }}</div>
                  <div class="text">我的评论</div>
                </router-link>
              </div>
            </div>
            <div class="post-article" @click="goadd()">
              <div class="text">前往发帖</div>
            </div>
            <!-- <div class="post-article">前往发帖</div> -->
          </div>
        </div>
      </div>
      <div style="clear: both; float: none"></div>
    </div>
  </div>
</template>

<script>
var _this;
import Search from "@/components/Search";
import { label, postsList, thumbsUp } from "@/api/home";
import { getLocalTime } from "@/utils";
import { mapState, mapMutations } from "vuex";

export default {
  name: "Home",
  components: {
    SearchBar: Search,
  },
  data() {
    return {
      label: [
        {
          id: 0,
          labelName: "全部",
          gmtCreate: 0,
          gmtModified: 0,
          status: 1,
        },
      ],
      pageNum: 1, // 页数
      pageSize: 20, // 页码
      labelId: 0, // 标签
      title: "", // 标题
      total: 0, // 总数
      postsList: [], // 文章列表
    };
  },
  computed: {
    ...mapState({
      id: (state) => state.user.id,
      name: (state) => state.user.name,
      token: (state) => state.user.token,
      avatar: (state) => state.user.avatar,
      myPostCount: (state) => state.user.myPostCount,
      myEvaluateCount: (state) => state.user.myEvaluateCount,
    }),
  },
  watch: {
    token(n, o) {
      console.log(n);
      _this.getPostlist();
    },
  },
  created() {
    _this = this;
  },
  mounted() {
    console.log(this.avatar);
    _this.getLabel();
    _this.getPostlist();
  },
  methods: {
    changeTitle(val) {
      // console.log(val)
      _this.title = val;
    },
    // 裁剪字符串
    formatter(text) {
      const max = 200;
      if (text) {
        const textString = text.toString();
        if (textString.length > max) {
          return (
            `${textString.slice(0, max - 1)}...` +
            `<span style="color: #3f94ff;">阅读全文</span>`
          );
        }
      }
      let html = `<span style="color: #3f94ff;">阅读全文</span>`;
      return text ? text + html : html;
    },
    /**获取label */
    getLabel() {
      label()
        .then((res) => {
          let all = [
            {
              id: 0,
              labelName: "全部",
              gmtCreate: 0,
              gmtModified: 0,
              status: 1,
            },
          ];
          _this.label = all.concat(res.data);
        })
        .catch((error) => {
          console.log(error);
        });
    },
    /**点击label */
    clickLabel(id) {
      _this.labelId = id;
      _this.label.map((item) => {
        item.status = id == item.id ? 1 : 0;
      });
      _this.getPostlist();
    },
    /**获取贴子列表 */
    getPostlist() {
      let data = {
        pageNum: _this.pageNum,
        pageSize: _this.pageSize,
        labelId: _this.labelId,
        title: _this.title,
      };
      console.log(data);
      postsList(data).then((res) => {
        console.log(res.data);
        _this.total = res.data.total;
        _this.postsList = res.data.list;
      });
    },
    /**时间戳转中文 */
    getLocalTime(ns) {
      return getLocalTime(ns);
    },
    //页数改变
    current(page) {
      console.log(page);
      _this.pageNum = page;
      _this.getPostlist();
    },
    /**点击点赞 */
    like(item) {
      console.log(item.id);
      if (_this.id) {
        // 有登录状态
        let data = {
          accountId: _this.id,
          type: 0,
          targetId: item.id,
        };
        thumbsUp(data)
          .then((res) => {
            item.thumbsUpCount = res.data.thumbsUpCount;
            item.thumbsUpStatus = res.data.thumbsUpStatus;
            _this.$message({
              type: "success",
              message: res.data.thumbsUpStatus ? "点赞成功" : "取消点赞成功",
            });
          })
          .catch((res) => {
            _this.$message({
              type: "error",
              message: "点赞失败",
            });
          });
      } else {
        // 没有登录状态
        _this.$message({
          type: "error",
          message: "请先登录，再进行点赞操作",
        });
        _this.gologin();
      }
    },

    /**前往评论页面 */
    goadd() {
      if (_this.id) {
        // 有登录状态
        _this.$router.push("/add");
      } else {
        // 没有登录状态
        _this.$message({
          type: "error",
          message: "请先登录，再进行发帖操作",
        });
        _this.gologin();
      }
    },
    /**前往登录 */
    gologin() {
      _this.$EventBus.$emit("openDialog");
    },
  },
};
</script>


<style lang="less" scoped>
@import url(@/assets/css/home.less);
.content {
  position: relative;
  width: 1227px;
  margin: 50px auto;
  .left {
    display: inline-block;
    width: 855px;
    margin-right: 29px;
    .nav {
      width: 855px;
      // height: 80px;
      background: #ffffff;
      box-shadow: 0px 0px 7px 0px #dfe1e7;
      margin-bottom: 20px;
      .typebox {
        padding: 20px 43px;
        padding-bottom: 0px;
        // height: 40px;
        position: relative;
        .type {
          float: left;
          height: 18px;
          padding: 9px;
          margin-right: 25px;
          margin-bottom: 20px;
          text-align: center;
          min-width: 60px;
          background: #fdfeff;
          border-radius: 4px;
          border: 1px solid #d2d7e1;
          font-weight: 400;
          color: #303133;
          font-size: 14px;
          line-height: 20px;
          cursor: pointer;
          &.active {
            background: #3f94ff;
            color: #ffffff;
          }
        }
      }
    }
    .article {
      width: 855px;
      background: #ffffff;
      box-shadow: 0px 0px 7px 0px #dfe1e7;
      border-radius: 4px;
      .noarticle {
        padding: 100px 0px;
        text-align: center;
        img {
          width: 150px;
          margin-bottom: 20px;
        }
        .nocomment-text {
          width: 150px;
          margin: 0 auto;
          display: flex; /* 弹性布局 */
          justify-content: center;
          > div {
            width: 50%;
          }
          .nocomment-text-left {
            color: #606266;
          }
          .nocomment-text-right {
            cursor: pointer;
            color: #3f94ff;
          }
        }
      }
      .article-list {
        padding: 0px 43px 0px;
        .item {
          padding-top: 30px;
          .title {
            position: relative;
            height: 30px;
            margin-bottom: 15px;
            div {
              display: inline-block;
            }
            .Topping {
              color: #ec6756;
              height: 30px;
              line-height: 30px;
              margin-right: 7px;
              > i {
                height: 9px;
                font-size: 20px;
                padding-right: 3px;
              }
            }
            .name {
              cursor: pointer;
              font-size: 18px;
              font-weight: 500;
              color: #303133;
              line-height: 30px;
              letter-spacing: 1px;
              // cursor: pointer;
              font-family: PingFangSC-Medium, PingFang SC;
              :link,
              :visited {
                color: #303133;
              }
              :hover {
                color: #0055d6;
              }
            }
            .tag {
              position: absolute;
              right: 0;
              width: 89px;
              background: #fdfeff;
              border-radius: 3px;
              border: 1px solid #d2d7e1;
              padding: 0px 9px;
              height: 30px;
              font-size: 11px;
              line-height: 30px;
              text-align: center;
            }
          }
          .item-content {
            width: 770px;
            // height: 60px;
            font-size: 14px;
            font-weight: 400;
            color: #303133;
            margin-bottom: 20px;
            position: relative;
            .item-content-img {
              float: left;
              width: 175px;
              height: 85px;
              overflow: hidden;
              box-sizing: border-box;
              display: flex;
              justify-content: center;
              align-items: center;
              margin-right: 10px;
              img {
                width: 100%;
              }
            }
            .item-content-article {
              color: #303133;
              line-height: 20px;
              position: relative;
              cursor: pointer;
              word-wrap: break-word;
              word-break: normal;
            }
          }
          .item-bottom {
            height: 22px;
            position: relative;
            padding-bottom: 20px;
            border-bottom: 1px solid #eceff5;
            > div {
              display: inline-block;
              margin-right: 15px;
            }
            .avatar {
              // justify-content: center;
              > img {
                width: 22px;
                height: 22px;
                border-radius: 11px;
                vertical-align: bottom;
                margin-right: 9px;
              }
              .username {
                font-size: 16px;
                font-weight: 400;
                color: #303133;
                line-height: 22px;
                letter-spacing: 1px;
              }
            }
            .like,
            .comment {
              color: #727786;
              font-size: 12px;
              cursor: pointer;
              > i {
                margin-right: 5px;
              }
              span {
                display: inline-block;
                line-height: 22px;
              }
            }
            .like:hover {
              color: red;
            }
            .like.active {
              color: red;
            }
            .time {
              position: absolute;
              right: 0;
              color: #727786;
              > i {
                margin-right: 5px;
              }
            }
          }
        }
      }
      .article-page {
        padding: 0px 43px 28px;
        .center {
          margin-top: 30px;
          text-align: center;
        }
      }
    }
  }
}
</style>